<template>
	<view class="reset-password">
		<uni-forms :model-value="formData">
			<uni-forms-item name="mobile" label="手机号" label-width="100px" >
				<input type="tel" v-model="formData.mobile" placeholder="请输入手机号" />
			</uni-forms-item>
			
			<uni-forms-item name="password" label="密码" label-width="100px" >
				<input type="password" v-model="formData.password" placeholder="请输入密码" />
			</uni-forms-item>
			<uni-forms-item name="confirm" label="确认密码" label-width="100px" >
				<input type="password" v-model="formData.confirm" placeholder="请输入确认密码" />
			</uni-forms-item>
			<uni-forms-item name="verify" label="验证码" label-width="100px" >
				<view class="verify">
					<input type="text" v-model="formData.verify" placeholder="请输入验证码" />
					<button size="mini" :loading="loading" @click="getCode" :disabled="disabled">获取验证码</button>
				</view>
			</uni-forms-item>
		</uni-forms>
		<button class="reset-btn" @click="submitForm">重置密码</button>
		
	</view>
</template>
<script>
	import {
		resetpwd
	} from '@/api/login.js'
	import {mixin} from '@/static/mixin.js'

	export default {
		mixins:[mixin],
		data() {
			return {
				formData: {
					mobile: '',
					verify: '',
					password: '',
					confirm: '',
				},
				loading: false,
				disabled: false,
			}
		},
		methods: {
			getCode() {
				if (!this.formData.mobile) {
					uni.showToast({
						title: '请先输入手机号',
						icon: 'none'
					})
					return
				}
				this.loading = true
				this.disabled = true
				// 调用获取验证码的接口
				// resetPassword.getCode(this.formData.mobile).then(() => {
				//   this.loading = false
				//   uni.showToast({ title: '获取验证码成功' })
				// }).catch(() => {
				//   this.loading = false
				//   this.disabled = false
				// })
				// 模拟获取验证码成功后的逻辑
				setTimeout(() => {
					this.loading = false
					this.disabled = false
					uni.showToast({
						title: '获取验证码成功'
					})
				}, 1000)
			},
			submitForm() {
				const {
					mobile,
					verify,
					password,
					confirm
				} = this.formData
				if (!mobile) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (!verify) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					return
				}
				if (!password) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}
				if (!confirm) {
					uni.showToast({
						title: '请确认密码',
						icon: 'none'
					})
					return
				}
				if (password !== confirm) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none'
					})
					return
				}
				// 调用重置密码的接口
				resetpwd({mobile,verify,password,confirm}).then(() => {
					uni.showToast({
						title: '重置密码成功'
					})
					// 重置密码成功后，跳转到登录页面
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}).catch(() => {
					uni.showToast({
						title: '重置密码失败，请稍后再试',
						icon: 'none'
					})
				})
			},
		},
	}
</script>
<style lang="scss">
	.reset-password {
		padding: 20px;
		.verify {
			display: flex;
			justify-content: space-between;
			align-items: center;

			input {
				flex: 1;
			}

			button {
				width: 130px;
				padding: 15rpx;
			}
		}
		:deep(.uni-forms-item) {
			border-bottom: 1px solid $uni-border-color;
			margin-bottom: 0;
			padding-top: 20px;
			padding-bottom: 19px;
			font-size: 18px;
			display: flex;
			align-items: center;
		}
		.uni-forms-item__label{
			font-size: 18px;
		}
		button {
			color: #fff;
		}
		
		input {
			height: 30px;
			font-size: 18px;
		}
		
	}
	
	
</style>